<template>
  <div calss="container">
    BB
    <div>
      watch:用来监听data中数据的变换/监听路由的改变，当数据发生
      变换之后，就会走watch的逻辑处理函数
      如果是引用类型监听不到,可以通过deep:true进行深度监听.还有一个immediate:true初始化监听
      如果单独监听对象的某一个属性，可以用字符串引起来使用，
    </div>
    <ul>
      <li v-for="(v, i) in student" :key="i">
        <span>{{ v }}</span>
        <input v-model="student[i]" type="text" />
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "B",
  data() {
    return {
      num: "数字",
      student: {
        uname: "小明",
        age: 16,
        sex: "男",
        className: "高一(2)班",
        studentId: 132323,
      },
    };
  },
  watch: {
    // ['student.name'] 也可以写成这种数组格式,单独监听其中一个属性，但只能有一个数据，不支持‘,’语句
    student: {
      handler() {
        console.log("触发student执行");
      },
      deep: true, // 全部监听
      immediate: true,
    },
  },
  // 计算属性
  computed: {},
  // 方法集合
  methods: {},
  // 生命周期 - DOM元素渲染前调用
  // created() {
  //   console.log("B组件created 创建");
  // },
  // activated() {
  //   console.log("B组件activated 激活");
  // },
  // deactivated() {
  //   console.log("B组件deactivated 失去激活");
  // },
  // destroyed() {
  //   console.log("B组件destroyed 销毁");
  // },
  // 生命周期 - DOM元素渲染后调用
  mounted() {},
  components: {},
};
</script>
<style lang='less' scoped>
.container {
  text-align: center;
}
</style>
